<script setup lang="ts">
// 我们希望组件就是局部的(哪个页面需要用 哪个页面自己导入)  我们又不想自己手动导入 => 配置vite自动导入
// import {
//   NavBar as VanNavBar,
//   Field as VanField,
//   Checkbox as VanCheckbox,
//   Button as VanButton,
//   Divider as VanDivider
// } from 'vant'
// import CpNavBar from '@/components/CpNavBar.vue'
// 自动导入组件 并且也能获取到组件的类型

import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const flag = ref(true)
const mobile = ref('')
const pass = ref('')

// const obj = {
//   name: 'zs'
// }
// obj

// type O = typeof obj
// const obj2: O = {
//   name: 'ls'
// }
// obj2
</script>

<template>
  <div class="login-page">
    <!-- 
      二次封装: 之前我们封装el-dialog 
      封装的意义: 为了代码维护 我不希望将来页面使用navbar组件 就是一大坨代码 
    -->
    <CpNavBar right-text="注册" @click-right="router.push('/zhuce')"></CpNavBar>

    <VanField v-model="mobile" placeholder="请输入"></VanField>
    <VanField v-model="pass" placeholder="请输入">
      <template #right-icon>
        <span>123</span>
      </template>
    </VanField>

    <VanCheckbox v-model="flag">我同意</VanCheckbox>

    <VanButton type="primary" round block>登录</VanButton>

    <VanDivider>第三方登录</VanDivider>

    <!-- <van-tabs>
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs> -->
  </div>
</template>

<style lang="scss" scoped></style>
